<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机序列</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
            overflow: hidden;
        }

        #app {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .input_content {
            height: 40px;
            width: 500px;
            display: flex;
            justify-content: space-between;
        }

        .input_content input {
            flex: 1;
            border: 0;
            outline: none;
            border: 2px solid #c4c7ce;
            border-radius: 10px 0 0 10px;
            text-indent: 10px;
        }

        .input_content input::-webkit-outer-spin-button,
        .input_content input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        .input_content .btn {
            width: 112px;
            height: 100%;
            background-color: #4e6ef2;
            color: #FFF;
            letter-spacing: 1px;
            font-size: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 0 10px 10px 0;
            font-weight: 400;
            transform: translateX(-2px);
            cursor: pointer;
            -webkit-user-select: none;
        }

        .input_content .btn:active {
            background-color: #6f87e9;
        }

        .list {
            margin-top: 20px;
            width: 800px;
            max-height: 500px;
            overflow: auto;
            background-color: #c4c7ce;
        }

        .list table {
            width: 100%;
            background-color: #fff;
            border-collapse: collapse;
            border-spacing: 0;
            border-color: #e6e6e6;
            font-weight: 400;
        }

        table th {
            padding: 9px 15px;
            min-height: 20px;
            line-height: 20px;
            font-size: 14px;
            color: #999;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="input_content">
            <input type="number" placeholder="请输入分组数量（正整数）" />
            <div class="btn">生成随机序列</div>
        </div>
        <div class="list"></div>
    </div>
</body>

<script>
    let btn = document.querySelector(".btn");
    let game = null;
    class Game {
        constructor(el, size) {
            this.el = typeof el === "string" ? document.querySelector(el) : el;
            this.size = size;
            this.clear();
        }
        startGame() {
            const listDom = this.el.querySelector(".list");
            if (!listDom) return;
            let _this = this,
                beginIndex = 0,
                timer = null;
            const randomList = new Array(this.size).fill(0).map((item, index) => index + 1);
            randomList.sort((a, b) => Math.random() - 0.5);

            function fn() {
                const wrapper = document.querySelector(".table-content");
                _this.appendItem(wrapper, beginIndex++, randomList[beginIndex-1]);
                if (beginIndex === _this.size) {
                    cancelAnimationFrame(timer);
                    timer = null;
                }else{
                    requestAnimationFrame(fn)
                }
            }
            listDom.innerHTML += `
                <table border>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>组名</th>
                    </tr>
                </thead>
                <tbody class="table-content">
                </tbody>
            </table>`
            timer = requestAnimationFrame(fn);

        }
        appendItem(dom, index, item) {
            dom.innerHTML += `<tr>
                        <th>序号${index+1}</th>
                        <th>组名${item}</th>
                    </tr>`
        }
        clear() {
            const dom = this.el.querySelector(".list");
            if (dom) {
                dom.innerHTML = "";
            }
        }
    }
    btn.onclick = () => {
        const ipt = document.querySelector("input");
        if(!Number.parseInt(ipt.value)) {
            alert("请输入合法数字");
            return;
        }
        game = new Game("#app", Number.parseInt(ipt.value));
        game.startGame()
    }
</script>

</html>